<template>
	<view class="content">
		<uni-status-bar></uni-status-bar>
		<view class="allbox">
			<view class="page-title">
				<text>绑定手机号完成注册</text>
			</view>
			<image src="/static/xiangju.png" mode="widthFix" class="page-img"></image>
				<input class="phone-ipt" placeholder="请输入您的手机号" type="number" maxlength="11" v-model="phone" />
				<view @click="getVerificationCode" disables class="verificationCodeBtn">
					{{vfcBtn}}
				</view>
				<view class="codeipt-box">
					<input class="code-ipt" placeholder="请输入验证码" type="number" maxlength="4" v-model="verificationCode" />
					<!-- <view class="lines">
						<text class="line"></text>
						<text class="line"></text>
						<text class="line"></text>
						<text class="line"></text>
					</view> -->
				</view>
			<view @click="zhuce" class="save">
				<span class="save-text">确认</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				verificationCode: '',
				phone: '',
				vfcBtn: '获取验证码',
				countDown: 60,
				timer: '',
				getBtn: true,
			};
		},
		watch: {
			vfcBtn(nval, oval) {
				if (nval == 0) {
					clearInterval(this.timer)
					this.vfcBtn = '获取验证码'
					this.getBtn = true
				}
			}
		},
		methods: {
			getStartCountDown() {
				this.getBtn = false
				this.vfcBtn = this.countDown
				this.timer = setInterval(() => {
					this.vfcBtn--
				}, 1000)
			},
			async getVerificationCode() {
				await this.getPhone()
				if (this.getBtn == true) {
					this.getStartCountDown()
					uni.request({
						url: this.$utils.domain + "/api/captcha",
						method: "POST",
						data: {
							mobile: this.phone
						},
						success: res => {
							uni.showToast({
								title: "已发送",
								icon: "none"
							})
						}
					})
				}
			},
			getPhone() {
				return new Promise((resolve, reject) => {
					if (!this.phone) {
						reject(false)
						uni.showModal({
							content: "请输入手机号码"
						})
					} else(
						resolve(true)
					)
				})
			},
			zhuce() {
				let that = this;
				if (that.verificationCode == '') {
					that.$utils.showLayer('请填获取验证码');
					return;
				}
				if (that.phone == '') {
					that.$utils.showLayer('请填写手机号');
					return;
				}
				if (that.phone.length < 11) {
					that.$utils.showLayer('请填写正确手机号');
					return;
				}
				let paramData = {
					mobile: that.phone,
					captcha: that.verificationCode
				};
				this.$utils.postrequest('/api/add_mobile', paramData, function(res) {
					if (res.code == 200) {
						that.$utils.showLayer('绑定成功');
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/guide/guide'
							})
						}, 800);
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				});
			}
		}
	};
</script>

<style scoped>
	.content{
		padding-top: 50rpx;
	}
	.allbox{
		position: relative;
		padding-top: 60rpx;
	}
	.page-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #0E100F;
		line-height: 36rpx;
		margin-bottom: 52rpx;
		text-align: center;
	}

	.page-img {
		width: 204rpx;
		margin: 0 auto;
		display: block;
	}
	.phone-ipt{
		width: 636rpx;
		height: 104rpx;
		border: 1px solid rgba(117, 100, 254, .27);
		border-radius: 52rpx;
		text-align: center;
		margin: 60rpx auto;
		display: block;
	}
	.verificationCodeBtn{
		width: 366rpx;
		height: 104rpx;
		background: linear-gradient(-3deg, #7564FE, #7564FE);
		border-radius: 52rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 104rpx;
		margin: 0 auto;
	}
	.codeipt-box{
		width: 636rpx;
		height: 104rpx;
		position: relative;
		margin: 0 auto;
		border-bottom: 1px solid #858A8A;
		margin-top: 40rpx;
	}
	.lines{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.line{
		width: 138rpx;
		height: 3rpx;
		background: #858A8A;
	}
	.code-ipt{
		width: 100%;
		height: 100%;
		display: block;
		font-size: 30rpx;
		text-align: center;
	}
	.save{
		font-size: 30rpx;
		font-weight: bold;
		color: #0E100F;
		line-height: 30rpx;
		position: absolute;
		top: 0;
		right: 30rpx;
	}
</style>
